<html>
<head>
    <link rel="stylesheet" href="{{service}}resources/vditor/dist/index.css?{{serverToken}}"/>
    <link rel="stylesheet" href="{{service}}resources/vditor/style.css?{{serverToken}}"/>
    <script src="{{service}}resources/vditor/dist/index.min.js?{{serverToken}}"></script>
    <script src="{{service}}resources/vditor/jquery-3.6.0.min.js?{{serverToken}}"></script>
</head>
<body class="body">
<div id="vditor" class="vditor vditor--fullscreen"></div>
<div id="editorInfo" style="display:none;">
    <div style="max-width: 520px; font-size: 14px;line-height: 22px;margin-bottom: 14px;">
        <p style="text-align: center;margin: 14px 0">
            <em>Markdown Editor</em>
        </p>
        <div style="display: flex;margin-bottom: 14px;flex-wrap: wrap;align-items: center">
            <div style="flex: 1;min-width: 250px">
                IntelliJ Platform A full-featured WYSIWYG editor for markdown<br>
                Acknowledgement <a href="https://github.com/Vanessa219/vditor" target="_blank">vditor</a>
            </div>
        </div>
        <div style="display: flex;flex-wrap: wrap;">
            <ul style="list-style: none;flex: 1;min-width:148px">
                <li>
                    Source Code: <a href="https://github.com/shuzijun/markdown-editor" target="_blank">shuzijun/markdown-editor</a>
                </li>
                <li>
                    Donate: <a href="https://shuzijun.com/donate.html" target="_blank">donate</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="donate" style="display:none;">
    <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
        <path d="M881.664 132.096c-69.632-69.632-167.936-97.28-263.168-75.776-22.528 5.12-35.84 26.624-30.72 49.152s26.624 35.84 49.152 30.72c67.584-15.36 137.216 4.096 186.368 53.248C926.72 292.864 926.72 460.8 823.296 563.2L512 875.52 199.68 564.224c-102.4-103.424-102.4-271.36 0-373.76 77.824-77.824 204.8-77.824 282.624 0l69.632 69.632c8.192 8.192 77.824 76.8 150.528 76.8h5.12c30.72-1.024 57.344-15.36 77.824-39.936 14.336-17.408 11.264-43.008-6.144-57.344-17.408-14.336-43.008-11.264-57.344 6.144-6.144 8.192-12.288 9.216-17.408 10.24-26.624 2.048-70.656-29.696-93.184-53.248L541.696 133.12c-109.568-109.568-288.768-109.568-399.36 0C7.168 268.288 7.168 487.424 142.336 622.592L483.328 962.56c8.192 8.192 18.432 12.288 28.672 12.288 10.24 0 20.48-4.096 28.672-12.288l340.992-340.992c65.536-65.536 101.376-152.576 101.376-244.736 0-92.16-35.84-179.2-101.376-244.736z"></path>
        <path d="M240.64 233.472c-33.792 30.72-50.176 76.8-50.176 136.192 0 22.528 18.432 40.96 40.96 40.96s40.96-18.432 40.96-40.96c0-34.816 8.192-60.416 23.552-74.752 18.432-17.408 44.032-16.384 46.08-16.384 22.528 2.048 41.984-15.36 44.032-37.888 2.048-22.528-15.36-41.984-37.888-44.032-7.168-1.024-63.488-4.096-107.52 36.864z"></path>
    </svg>
</div>
<div id="format" style="display: none;">
    <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
        <path d="M1024 1012.48a2119.68 2119.68 0 0 1-45.312-409.6v-228.864a145.92 145.92 0 0 0-146.944-146.176h-128v-128a100.096 100.096 0 0 0-99.84-99.84h-182.016a100.608 100.608 0 0 0-100.352 99.84v128h-128a145.92 145.92 0 0 0-145.664 146.176v228.608a2139.904 2139.904 0 0 1-45.312 409.6L0 1024h1024zM421.888 99.84h182.016v128h-182.272v-128z m274.432 742.4l3.328-146.944a51.2 51.2 0 0 0-25.6-43.52 48.896 48.896 0 0 0-51.2 0 51.2 51.2 0 0 0-25.6 43.52l-2.304 121.344-4.352 69.12L588.8 921.6h-185.856a532.992 532.992 0 0 0 23.296-160.256 51.2 51.2 0 1 0-100.096 0A420.352 420.352 0 0 1 296.448 921.6H120.832l2.304-13.824a2033.92 2033.92 0 0 0 25.6-307.2v-39.168h728.576v67.072a2063.104 2063.104 0 0 0 25.6 281.6l2.304 13.824h-216.064zM877.312 460.8H148.48v-91.392a45.568 45.568 0 0 1 45.312-40.96h642.56a45.312 45.312 0 0 1 40.96 45.312z"></path>
    </svg>
</div>

</body>
<script>
    $.ajaxSettings.async = false;
    const userTemplate = "{{userTemplate}}" === "true";
    const fileUrl = "{{service}}markdownFile?file={{filePath}}&projectUrl={{projectUrl}}&projectName={{projectName}}&{{serverToken}}";
    const uploadUrl = "{{service}}uploadFile?file={{filePath}}&projectUrl={{projectUrl}}&projectName={{projectName}}&{{serverToken}}";
    const exportUrl = "{{service}}exportFile?file={{filePath}}&projectUrl={{projectUrl}}&projectName={{projectName}}&{{serverToken}}";
    const vditorCDN = "{{service}}resources/vditor";
    const vditorThemeCDN = userTemplate ? "{{service}}assets/vditor/content-theme" : "{{service}}resources/vditor/dist/css/content-theme";
    let initError = true;
    let fileValue = "";
    let saveTime = Date.now();
    const darcula = "{{darcula}}" === "true";

    window.onload = function () {
        if (userTemplate) {
            $('<link>').appendTo('head').attr({
                type: 'text/css',
                rel: 'stylesheet',
                href: '{{service}}assets/vditor/userStyle.css'
            });
        }
        appendSyncedTip(!initError);
        vditor.vditor.toolbar.elements.export.querySelectorAll(".vditor-hint")[0].innerHTML = "<button onclick='exportFile(\"pdf\")'>PDF</button>\n<button onclick='exportFile(\"html\")'>HTML</button>"
        let infoHtml = vditor.vditor.toolbar.elements.info.querySelectorAll('button')[0].outerHTML;
        vditor.vditor.toolbar.elements.info.querySelectorAll('button')[0].remove()
        vditor.vditor.toolbar.elements.info.innerHTML = infoHtml;
        vditor.vditor.toolbar.elements.info.querySelectorAll('button')[0].onclick = function () {
            vditor.vditor.tip.show(document.getElementById("editorInfo").innerHTML, 0);
        };
        document.addEventListener('mousedown', (event) => {
            if (event.button === 2) {
                if (window.getSelection().isCollapsed) {
                    document.onselectstart =function(){
                        return false;
                    }
                    setTimeout(() => {
                        document.onselectstart =function(){
                            return true;
                        }
                    }, 0);
                }
            }
        });
        /*const contentMenuStyle = document.getElementById("contentMenu").style;
        const notepad = document.getElementsByClassName("vditor-content")[0];
        notepad.addEventListener('contextmenu', function(e) {
            e.preventDefault();
            contentMenuStyle.top =  e.clientY+ "px";
            contentMenuStyle.left = e.clientX + "px";
            contentMenuStyle.display = "block"
            contentMenuStyle.opacity = "1";
        }, false);
        notepad.addEventListener('click', function(e) {
            contentMenuStyle.opacity = "0";
            setTimeout(function() {
                contentMenuStyle.display = "none";
            }, 501);
        }, false);*/
    }

    function editBlur(md,format) {
        if (initError) {
            vditor.tip("Get init file request error,Don't save.", 1000);
            return;
        }
        if (!format && md === fileValue) {
            return;
        }
        $.post(fileUrl, {"value": md}, function (data) {
            if (data.success === false) {
                vditor.tip("Failed to save file:" + data.message, 0);
            } else {
                fileValue = md;
                syncedTip(true, data)
                saveTime = Date.now() + 5000;
            }
        }).fail(function () {
            vditor.tip("Save file request error", 0);
        })
    }

    function editFocus(md) {
        if (Date.now() <= saveTime) {
            return;
        }
        $.get(fileUrl, function (data) {
            if (md !== data) {
                vditor.setValue(data);
                fileValue = vditor.getValue();
                syncedTip(true, data)
            }
        }).fail(function () {
            vditor.tip("Get file request error", 0);
        })
    }

    function editInput(md) {
        syncedTip(false, md)
    }

    function initValue() {
        let value = "";
        $.get(fileUrl, function (data) {
            value = data;
            initError = false;
        }).fail(function () {
            vditor.tip("Get file request error", 0);
            value = "Get file request error,Please reload";
            initError = true;
        })
        return value;
    }

    function appendSyncedTip(isSynced) {
        let synced = document.createElement("span");
        synced.className = "vditor-counter vditor-tooltipped vditor-tooltipped__nw";
        synced.id = "syncedTip";
        synced.title = "Automatic synchronization after losing focus";
        synced.innerHTML = isSynced ? "Synced" : "Not Synced";
        vditor.vditor.toolbar.element.appendChild(synced);
    }

    function syncedTip(isSynced, md) {
        if (!initError && (isSynced || md === fileValue)) {
            document.getElementById("syncedTip").innerHTML = "Synced";
        } else {
            document.getElementById("syncedTip").innerHTML = "Not Synced";
        }

    }

    function exportFile(type) {
        let options = {
            mode: "light",
            anchor: 2,
            lang: vditor.vditor.options.lang,
            hljs: vditor.vditor.options.preview.hljs,
            speech: {enable: false},
            math: vditor.vditor.options.preview.math,
            cdn: vditor.vditor.options.cdn,
            markdown: vditor.vditor.options.preview.markdown,
            theme: vditor.vditor.options.preview.theme,
            icon: vditor.vditor.options.icon
        }
        options.theme.current = "idea-light";
        Vditor.md2html(vditor.getValue(), options).then((content) => {
            let html = "<html>"
                + "<head>"
                + "<meta charset=\"utf-8\" />"
                + "<link rel=\"stylesheet\" type=\"text/css\" href=\"" + options.cdn + "/dist/index.css\"/>"
                + "<script src=\"" + options.cdn + "/dist/js/i18n/" + options.lang + ".js\"><\/script>"
                + "<script src=\"" + options.cdn + "/dist/method.min.js\"><\/script>"
                + "</head>"
                + "<body style=\"width: 1075px;\">"
                + "<div class=\"vditor-reset\" id=\"preview\">" + content + "</div>"
                + "<script>"
                + "    const previewElement = document.getElementById('preview');"
                + "    Vditor.setContentTheme('" + options.theme.current + "', '" + options.theme.path + "');"
                + "    Vditor.codeRender(previewElement);"
                + "    Vditor.highlightRender(" + JSON.stringify(options.hljs) + ", previewElement, '" + options.cdn + "');"
                + "    Vditor.mathRender(previewElement, { cdn: '" + options.cdn + "',math: " + JSON.stringify(options.math) + "});"
                + "    Vditor.mermaidRender(previewElement, '" + options.cdn + "', '" + options.mode + "');"
                + "    Vditor.flowchartRender(previewElement, '" + options.cdn + "');"
                + "    Vditor.graphvizRender(previewElement, '" + options.cdn + "');"
                + "    Vditor.chartRender(previewElement, '" + options.cdn + "', '" + options.mode + "');"
                + "    Vditor.mindmapRender(previewElement, '" + options.cdn + "', '" + options.mode + "');"
                + "    Vditor.abcRender(previewElement, '" + options.cdn + "');"
                + "    Vditor.mediaRender(previewElement);"
                + "    Vditor.speechRender(previewElement);"
                + " <\/script> "
                + " <script src=\"" + options.cdn + "/dist/js/icons/" + options.icon + ".js\"><\/script>"
                + "</body></html>";

            $.post(exportUrl, {
                "value": html,
                "type": type,
                "cdn": options.cdn,
                "themeCdn": options.theme.path
            }, function (data) {
                if (data.success === false) {
                    vditor.tip("Failed to Export file", 0);
                }
            }).fail(function () {
                vditor.tip("Save file request error", 0);
            })
        });
    }

    const vditor = new Vditor('vditor', {
        "theme": darcula ? "dark" : "light",
        "height": document.documentElement.clientHeight,
        "lang": "{{Lang}}",
        "cache": {
            "enable": false
        },
        "toolbar": [
            {"name": "emoji", "tipPosition": "s"},
            {"name": "headings", "tipPosition": "s"},
            {"name": "bold", "tipPosition": "s"},
            {"name": "italic", "tipPosition": "s"},
            {"name": "strike", "tipPosition": "s"},
            {"name": "link", "tipPosition": "s"},
            "|",
            {"name": "list", "tipPosition": "s"},
            {"name": "ordered-list", "tipPosition": "s"},
            {"name": "check", "tipPosition": "s"},
            {"name": "outdent", "tipPosition": "s"},
            {"name": "indent", "tipPosition": "s"},
            "|",
            {"name": "quote", "tipPosition": "s"},
            {"name": "line", "tipPosition": "s"},
            {"name": "code", "tipPosition": "s"},
            {"name": "inline-code", "tipPosition": "s"},
            {"name": "insert-before", "tipPosition": "s"},
            {"name": "insert-after", "tipPosition": "s"},
            {"name": "table", "tipPosition": "s"},
            {"name": "upload", "tipPosition": "s"},
            "|",
            {"name": "undo", "tipPosition": "s"},
            {"name": "redo", "tipPosition": "s"},
            {
                "name": "format",
                "tip": "format",
                "tipPosition": "s",
                "icon": document.getElementById("format").innerHTML,
                click() {
                    editBlur(vditor.getValue(),true)
                }
            },
            "|",
            {"name": "edit-mode", "tipPosition": "w"},
            {
                "name": "donate",
                "tip": "donate",
                "tipPosition": "s",
                "icon": document.getElementById("donate").innerHTML,
                click() {
                    window.open("https://shuzijun.com/donate.html");
                }
            },
            {
                name: "more",
                toolbar: [
                    "both",
                    "code-theme",
                    "content-theme",
                    "outline",
                    "preview",
                    "devtools",
                    "export",
                    "info"
                ],
            },
        ],
        "toolbarConfig": {"pin": true},
        "cdn": vditorCDN,
        "preview": {
            "theme": {
                "current": darcula ? "idea-dark" : "idea-light",
                "path": vditorThemeCDN
            },
            "markdown": {
                "sanitize": false
            },
            "maxWidth": $(window).width() - 100,
            "actions": ["desktop", "tablet", "mobile"],
            "hljs": {"style": darcula ? "dracula" : "github"},
            "math": {
                "inlineDigit": true
            }
        },
        "counter": {
            "enable": true
        },
        "upload": {
            "url": uploadUrl,
            format(files, responseText) {
                saveTime = Date.now() + 5000;
                return responseText;
            }
        },
        "value": initValue(),
        after() {
            fileValue = vditor.getValue()
        },
        blur(md) {
            editBlur(md,false)
        },
        focus(md) {
            editFocus(md)
        },
        input(md) {
            editInput(md)
        }
    });

    function updateStyle(style, darcula) {
        let newStyle = document.createElement('style');
        newStyle.id = 'ideaStyle';
        newStyle.innerHTML = style;
        let oldStyle = document.getElementById('ideaStyle');
        oldStyle.parentNode.replaceChild(newStyle, oldStyle);
        vditor.setTheme(darcula ? "dark" : "light", darcula ? "idea-dark" : "idea-light", darcula ? "dracula" : "github", vditorThemeCDN)
    }


    function updateHeight(width, height) {
        setTimeout(function (width, height) {
            if (window.innerHeight < height) {
                return
            }
            let vditorDom = document.getElementById('vditor');
            vditorDom.style.paddingTop = (window.innerHeight - height) + "px";
        }, 500, width, height)
    }
</script>
<script>
    {{injectScript}}
</script>
{{ideStyle}}
</html>